	<div class="container minh">
		<ol class="breadcrumb">
			<li class="breadcrumb-item">角色管理</li>
			<li class="breadcrumb-item active">角色列表</li>
		</ol>
		<div class="card mb-3">
			<table id="user" class="table table-striped table-bordered" style="width: 100%;">
				<thead>
					<tr>
						<th>编号</th>
						<th>角色名称</th>
						<th>角色状态</th>
						<th>创建时间</th>
						<th>更新时间</th>
						<th>操作</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		var url = "vendor/datatables/zh_CN.json";
		$(document).ready(function() {
						$('#user').dataTable({
												"text-align" : 'center',
												 "autoWidth": true,
												"language" : {
													url : url
												},
												"ajax" : 'console/roles.json',
												"processing" : true,
												"serverSide" : true,
												"ordering" : false,
												"columns" : [
														{"data" : "id"
														},{
															"data" : "roleName",
															"render":function(data, type,row, meta){
																if("ADMIN"==data){
																	return data="管理员";
																}else{
																	return data="用户";
																}
															}
														},{
															"data" : "status",
															"render" : function(data, type,row, meta) {
																if (data == "ACTIVE") {
																	data = "<span style='color:blue'>有效</span>";
																} else {
																	data = "<span style='color:red'>无效</span>";
																}
																return data;
															}
														},{
															"data" : "createTime",
															"render" : function(data, type,row, meta) {
																//时间格式化
																return moment(data).format("YYYY-MM-DD HH:mm:ss");
															}
														},{
															"data" : "updateTime",
															"render" : function(data, type,row, meta) {
																//时间格式化
																return moment(data).format("YYYY-MM-DD HH:mm:ss");
															}
														},
														{
															"data" : "id",
															//http://datatables.club/manual/daily/2016/04/25/option-columns-render1.html
															"render" : function(data, type,row, meta) {
																if(row.status=="ACTIVE"){
																	return data = '<button id="freezeRole" class="btn btn-danger btn-sm" data-id='+data+'>冻结</button>';
																}else{
																	return data = '<button id="unFreezeRole" class="btn btn-info btn-sm" data-id='+data+'>解冻</button>';
																}
															}
														} ]
											});
						});

		$(document).delegate('#freezeRole', 'click', function() {
			$.ajax({
				url : "console/freeze/" + $(this).data("id"),
				async : true,
				type : "POST",
				dataType : "json",
				cache : false, 
				success : function(data) {
					if (data.resultCode == "SUCCESS") {
						$("#resultModal").modal('show');
						$('#roles').DataTable().ajax.reload(); 
					} else {
						alert("冻结失败");
					}
				},
				error : function(data) {
					alert("请求异常");
				}
			});
		});

		$(document).delegate('#unFreezeRole', 'click', function() {
			$.ajax({
				url : "console/unFreeze/" + $(this).data("id"),
				async : true,
				type : "POST",
				dataType : "json",
				cache : false, 
				success : function(data) {
					if (data.resultCode == "SUCCESS") {
						alert("解冻成功");
						$('#roles').DataTable().ajax.reload(); 
					} else {
						alert("解冻失败");
					}
				},
				error : function(data) {
					alert("请求异常");
				}
			});
		});
	</script>

	<div class="modal fade" id="resultModal">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-body">成功冻结</div>
			</div>
		</div>
	</div>
